<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>代码生成</title>
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/font-awesome/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="${request.contextPath}/plugins/select2/select2.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/animate.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/style.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/common.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-xs-12">
				<div class="ibox">
					<div class="ibox-content">
						<form class="form-inline m-b-xs">
							<div class="form-group">
								<input type="text" id="tableName" name="tableName" placeholder="输入表名称搜索" class="form-control">
								<button id="btn_query"  class="btn btn-sm btn-info" type="button"><i class="fa fa-search"></i> 搜索</button>
								<button id="btn_reset" class="btn btn-sm btn-danger" type="button"><i class="fa fa-refresh"></i> 重置</button>
							</div>
						</form>
						<div class="table-responsive">
							<table id="table" class="table table-striped table-bordered table-hover">
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 通用js引入 -->
	<script src="${request.contextPath}/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script src="${request.contextPath}/plugins/layer/layer.min.js"></script>
	<script src="${request.contextPath}/plugins/laydate/laydate.js"></script>
	<script src="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/jquery.validate.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/messages_zh.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="${request.contextPath}/hadmin/js/content.js"></script>
	<script src="${request.contextPath}/hadmin/js/common.js?v=0.9"></script>
	<script>
		// 表格参数设置
		$("#table").bootstrapTable({
			url: '${request.contextPath}/system/gen/page', // 请求后台的URL（*）
			contentType: "application/x-www-form-urlencoded",// 用post请求，这个是必须条件，必须加上，get可以不用，亲测
			dataType: "json",
			method: "POST", // 请求方式（*）
			//toolbar: '#toolbar', // 工具按钮用哪个容器
			undefinedText: "-", // 为undefined时显示的字
			striped: false, // 是否显示行间隔色
			cache: false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, // 是否显示分页（*）
			sortable: false, // 是否启用排序
			sortOrder: "asc", // 排序方式
			sortName: "", // 排序名称
			toolbar: '', // 指定工作栏
			loadingFontSize: 13, // 自定义加载文本的字体大小
			// search: true, // 是否使用客户端搜索
			queryParams: queryInitParams,// 传递参数（*）
			responseHandler: responseHandler,
			queryParamsType: "limit",
			sidePagination: "server", // 分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, // 初始化加载第一页，默认第一页
			pageSize: 10, // 每页的记录行数（*）
			pageList: [10, 20, 50, 100], // 可供选择的每页的行数（*）
			showColumns: false, // 是否显示所有的列
			showRefresh: false, // 是否显示刷新按钮
			minimumCountColumns: 2, // 最少允许的列数
			clickToSelect: true, // 是否启用点击选中行
			strictSearch: true,
			// height: 460, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			showToggle: false, // 是否显示详细视图和列表视图的切换按钮
			uniqueId: "id", // 每一行的唯一标识，一般为主键列
			cardView: false, // 是否显示详细视图
			detailView: false, // 是否显示父子表
			showExport: false, // 是否显示导出
			exportDataType: 'basic', // 'basic', 'all', 'selected'.
			escape: true, // html转义
			// align: "center",
			columns: [
				{checkbox: true },
				{
					field: 'tableName',
					title: '表名称',
					align : "center"
				}, {
					field: 'engine',
					title: '数据库类型',
					align : "center"
				},
				{
					field: 'tableComment',
					title: '表备注',
					align : "center"
				},
				{
					field: 'createTime',
					title: '创建时间',
					align : "center"
				},
				{
					field : 'operation',
					title : '操作',
					align : "center",
					formatter : function(value, row, index) {
						return '<a class="btn btn-info btn-xs" href="${request.contextPath}/system/gen/code?tables='+ row.tableName +'">生成代码</a>';
					}
				}
			],
			onLoadSuccess: tableLoadSuccess, // 成功渲染回调
		});

		// 表格查询参数
		function queryInitParams(params) {
			// 这里的键的名字和后端的变量名必须一致
			var temp = {
				limit: params.limit,
				offset: params.offset,
				tableName: $("#tableName").val(),
			};
			return temp;
		}

		// 表格加载成功事件
		function tableLoadSuccess(data) {
			$(".bs-checkbox").css('vertical-align','middle');
		}

		// 表格响应数据
		function responseHandler(data) {
			return data;
		}

		// 触发搜索
		$("#btn_query").click(function() {
			refreshTable();
		})

		// 重置查询条件
		$("#btn_reset").click(function() {
			$("#search").val("");
			refreshTable();
		})

		// 刷新表格
		function refreshTable() {
			var params = $("#table").bootstrapTable('getOptions');
			$("#table").bootstrapTable('refresh', params);
		}
	</script>
</body>
</html>
